﻿<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>智运宝TMS</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="css/global.css" media="all">
    <link rel="stylesheet" href="css/main.css" media="all">
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">

</head>

<body>

<div class="layui-col-md7 " style="width: 100%;">
    <div class="layui-row ">
        <div class="layui-col-md12" style="border-bottom: solid 1px #999999;">
            <a class="layui-btn layui-btn-danger" href="https://www.wjx.top/jq/34112355.aspx" target="_blank"
               style="margin-left: 10px">点击登录意见提交</a>
            <a class="layui-btn layui-btn-danger" href="excel/智运宝物流系统操作说明书.pdf" target="_blank">点击查看智运宝物流系统操作说明书</a>

        </div>
        <div class="layui-col-md2" style="padding-top: 15px;padding-left: 15px; ">
            <div class="layui-row " style="position: fixed; ">

                <div class="layui-form-item">
                    <div class="layui-inline" style="width: 130px;color: #0099ff">

                        <input type="checkbox" checked="checked" id="checkbox1"/>驾驶员在职状态<br/>

                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline" style="width: 130px;color: #0099ff">

                        <input type="checkbox" checked="checked" id="checkbox2"/>在职驾驶员工作状态<br/>

                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline" style="width: 130px;color: #0099ff">

                        <input type="checkbox" checked="checked" id="checkbox3"/>车辆分配状态<br/>

                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline" style="width: 130px;color: #0099ff">

                        <input type="checkbox" checked="checked" id="checkbox4"/>未分配车辆状态<br/>

                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline" style="width: 130px;color: #0099ff">

                        <input type="checkbox" checked="checked" id="checkbox5"/>订单状态<br/>

                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline" style="width: 130px;color: #0099ff">

                        <input type="checkbox" checked="checked" id="checkbox6"/>运单状态<br/>

                    </div>
                </div>


                <div class="layui-form-item" style="padding-top: 20px">
                    <div class="layui-inline" style="width: 100px">
                        <button class="layui-btn-normal layui-btn" id="quanxuan">全选</button>
                    </div>
                    <div class="layui-inline" style="width: 100px">
                        <button class="layui-btn-normal layui-btn" id="quxiaoquanxuan">取消全选</button>
                    </div>

                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-form-item">

                <div class="layui-inline  card" >
                    <div id="sixthPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <div class="layui-inline card"  >
                    <div id="secondPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <div class="layui-inline card card" >
                    <div id="eighthPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                <div class="layui-inline card" >
                    <div id="firstPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <div class="layui-inline card" >
                    <div id="seventhPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <div class="layui-inline card" >
                    <div id="ninthPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                <div class="layui-inline card" >
                    <div id="tenthPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <div class="layui-inline card" >
                    <div id="thirdPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <div class="layui-inline card" >
                    <div id="eleventhPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                <div class="layui-inline card" >
                    <div id="forthPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <div class="layui-inline card" >
                    <div id="twelvethPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <div class="layui-inline card" >
                    <div id="thirthPieChart" style="width: 430px; height:340px;"></div>
                </div>

                <div class="layui-inline card" >
                    <div id="fifteenthPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <div class="layui-inline card" >
                    <div id="sixteenthPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <!--<div class="layui-form-item">-->
                <div class="layui-inline card" >
                    <div id="seventeenthPieChart" style="width: 1290px; height:340px;"></div>
                </div>
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                <div class="layui-inline card" >
                    <div id="fifthPieChart" style="width: 430px; height:340px;"></div>
                </div>
                <div class="layui-inline card" >
                    <div id="fourteenthPieChart" style="width: 430px; height:340px;"></div>
                </div>
            </div>


        </div>
    </div>
</div>


<script src="./plugins/echarts.common.min.js"></script>
<script src="./js/tools.js"></script>
<script src="./plugins/layui/layui.js"></script>
<script src="./js/config.js"></script>
<script type="text/javascript" src="./plugins/zTree_v3/js/jquery-1.4.4.min.js"></script>


<script type="text/javascript">

    layui.use(['form', 'table', 'jquery', 'layer', 'element', 'laydate', 'laypage'], function () {
        var form = layui.form;
        var table = layui.table;
        var $ = layui.$;
        var element = layui.element;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var tableheight = "full-200";
        var tablewidth = 90;
        var currentPage = 1;
        var cphData = [];
        var leixingData = [];
        var limitcount = 10;
        var curnum = 1;
        var laypage = layui.laypage;
        var jsyb = true;
        var jsyh = true;
        var jsyz = true;
        var zzjsyb = true;
        var zzjsyh = true;
        var zzjsyz = true;
        var clb = true;
        var clh = true;
        var clz = true;
        var wfpclb = true;
        var wfpclh = true;
        var wfpclz = true;
        var ddb = true;
        var ddh = true;
        var ddz = true;
        var ydb = true;
        var ydz = true;


// 调用方法// 调用
//         loadOneColumn();

// 定时刷新
//         setInterval(function () {
//             loadDriver1();
//             loadDriver2();
//             loadCar1();
//             loadCar2();
//             loadWaybill();
//         }, 5000);

        $.ajax({
            url: contextPath + "/piclist",
            type: "GET",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (res) {
                console.log(res);
                if (res.jsyb == true) {
                    loadDriver3();
                } else {
                    $("#sixthPieChart").parent().css('display','none');
                    jsyb = false;
                }
                if (res.jsyh == true) {
                    loadDriver1();
                } else {
                    $("#secondPieChart").parent().css('display','none');
                    jsyh = false;
                }
                if (res.jsyz == true) {
                    loadDriver5();
                } else {
                    $("#eighthPieChart").parent().css('display','none');
                    jsyz = false;
                }
                if (res.zzjsyb == true) {
                    loadDriver2();
                } else {
                    $("#firstPieChart").parent().css('display','none');
                    zzjsyb = false;
                }
                if (res.zzjsyh == true) {
                    loadDriver4();
                } else {
                    $("#seventhPieChart").parent().css('display','none');
                    zzjsyh = false;
                }
                if (res.zzjsyz == true) {
                    loadDriver6();
                } else {
                    $("#ninthPieChart").parent().css('display','none');
                    zzjsyz = false;
                }
                if (res.clb == true) {
                    loadCar3();
                } else {
                    $("#tenthPieChart").parent().css('display','none');
                    clb = false;
                }
                if (res.clh == true) {
                    loadCar1();
                } else {
                    $("#thirdPieChart").parent().css('display','none');
                    clh = false;
                }
                if (res.clz == true) {
                    loadCar4();
                } else {
                    $("#eleventhPieChart").parent().css('display','none');
                    clz = false;
                }
                if (res.wfpclb == true) {
                    loadCar2();
                } else {
                    $("#forthPieChart").parent().css('display','none');
                    wfpclb = false;
                }
                if (res.wfpclh == true) {
                    loadCar5();
                } else {
                    $("#twelvethPieChart").parent().css('display','none');
                    wfpclh = false;
                }
                if (res.wfpclz == true) {
                    loadCar6();
                } else {
                    $("#thirthPieChart").parent().css('display','none');
                    wfpclz = false;
                }
                if (res.ddb == true) {
                    loadOrder1();
                } else {
                    $("#fifteenthPieChart").parent().css('display','none');
                    ddb = false;
                }
                if (res.ddh == true) {
                    loadOrder2();
                } else {
                    $("#sixteenthPieChart").parent().css('display','none');
                    ddh = false;
                }
                if (res.ddz == true) {
                    loadTwoLine();
                } else {
                    $("#seventeenthPieChart").parent().css('display','none');
                    ddz = false;
                }
                if (res.ydb == true) {
                    loadWaybill();
                } else {
                    $("#fifthPieChart").parent().css('display','none');
                    ydb = false;
                }
                if (res.ydz == true) {
                    loadWaybill1();
                } else {
                    $("#fourteenthPieChart").parent().css('display','none');
                    ydz = false;
                }

            }
        });

        function loadDriver1() {
            var myChart = echarts.init(document.getElementById('secondPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
                title: {
                    text: '驾驶员在职状态环形图',
                    // subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'center',
                                    max: 1548
                                }
                            }
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                series: [{
                    name: '驾驶员在职状态环形图',
                    type: 'pie',
                    radius: ['42%', '62%'],  //设置环形的空间大小
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                position: 'center',
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: [],
                    "label": {
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "fontSize": 16
                            },
                            formatter: '{b}:{c}'
                        },
                        "emphasis": {
                            "show": true
                        }
                    }
                }]

            });
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var names = [];    //类别数组（用于存放饼图的类别）
            var brower = [];
            $.ajax({
                type: 'get',
                url: contextPath + 'driverNum1',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        brower.push({
                            value: item.num,
                            name: item.department
                        });
                    });
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        legend: {
                            data: names
                        },
                        series: [{
                            data: brower
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        function loadDriver2() {
            var myChart = echarts.init(document.getElementById('firstPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
                title: {
                    text: '在职驾驶员工作状态饼形图',
                    // subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [{
                    name: '在职驾驶员工作状态饼形图',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '50%'],
                    data: [],
                    "label": {
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "fontSize": 16
                            },
                            formatter: '{b}:{c}'
                        },
                        "emphasis": {
                            "show": true
                        }
                    }
                }]
            });
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var names = [];    //类别数组（用于存放饼图的类别）
            var brower = [];
            $.ajax({
                type: 'get',
                url: contextPath + 'driverNum2',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        brower.push({
                            name: item.department,
                            value: item.num
                        });
                    });
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        legend: {
                            data: names
                        },
                        series: [{
                            data: brower
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        //车辆
        function loadCar1() {
            var myChart = echarts.init(document.getElementById('thirdPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
                title: {
                    text: '车辆分配状态环形图',
                    // subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'center',
                                    max: 1548
                                }
                            }
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                series: [{
                    name: '车辆分配状态环形图',
                    type: 'pie',
                    radius: ['42%', '62%'],  //设置环形的空间大小
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                position: 'center',
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: [],
                    "label": {
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "fontSize": 16
                            },
                            formatter: '{b}:{c}'
                        },
                        "emphasis": {
                            "show": true
                        }
                    }
                }]
            });
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var names = [];    //类别数组（用于存放饼图的类别）
            var brower = [];
            $.ajax({
                type: 'get',
                url: contextPath + 'carNum1',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        brower.push({
                            value: item.num,
                            name: item.department
                        });
                    });
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        legend: {
                            data: names
                        },
                        series: [{
                            data: brower
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        function loadCar2() {
            var myChart = echarts.init(document.getElementById('forthPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
                title: {
                    text: '未分配车辆状态饼形图',
                    // subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [{
                    name: '未分配车辆状态饼形图',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '50%'],
                    data: [],
                    "label": {
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "fontSize": 16
                            },
                            formatter: '{b}:{c}'
                        },
                        "emphasis": {
                            "show": true
                        }
                    }
                }]
            });
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var names = [];    //类别数组（用于存放饼图的类别）
            var brower = [];
            $.ajax({
                type: 'get',
                url: contextPath + 'carNum2',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        brower.push({
                            name: item.department,
                            value: item.num
                        });
                    });
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        legend: {
                            data: names
                        },
                        series: [{
                            data: brower
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        //运单
        function loadWaybill() {
            var myChart = echarts.init(document.getElementById('fifthPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22", '#FF0000', '#FF8800', '#008800', '#00AAAA', '#0066FF', '#9900FF'],//饼图颜色
                title: {
                    text: '运单状态饼形图',
                    // subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [{
                    name: '运单状态饼形图',
                    type: 'pie',
                    radius: '60%',
                    center: ['61%', '50%'],
                    data: [],
                    "label": {
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "fontSize": 12
                            },
                            formatter: '{b}:{c}'

                        },
                        "emphasis": {
                            "show": true
                        }

                    }
                }]
            });
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var names = [];    //类别数组（用于存放饼图的类别）
            var brower = [];
            $.ajax({
                type: 'get',
                url: contextPath + 'waybillNum',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        brower.push({
                            name: item.department,
                            value: item.num
                        });
                    });
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        legend: {
                            data: names
                        },
                        series: [{
                            data: brower
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        function loadDriver3() {
            var myChart = echarts.init(document.getElementById('sixthPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
                title: {
                    text: '驾驶员在职状态饼形图',
                    // subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [{
                    name: '驾驶员在职状态饼形图',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '50%'],
                    data: [],
                    "label": {
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "fontSize": 16
                            },
                            formatter: '{b}:{c}'
                        },
                        "emphasis": {
                            "show": true
                        }
                    }
                }]
            });
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var names = [];    //类别数组（用于存放饼图的类别）
            var brower = [];
            $.ajax({
                type: 'get',
                url: contextPath + 'driverNum1',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        brower.push({
                            name: item.department,
                            value: item.num
                        });
                    });
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        legend: {
                            data: names
                        },
                        series: [{
                            data: brower
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        function loadDriver4() {
            var myChart = echarts.init(document.getElementById('seventhPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
                title: {
                    text: '在职驾驶员工作状态环形图',
                    // subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'center',
                                    max: 1548
                                }
                            }
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                series: [{
                    name: '在职驾驶员工作状态环形图',
                    type: 'pie',
                    radius: ['42%', '62%'],  //设置环形的空间大小
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                position: 'center',
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: [],
                    "label": {
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "fontSize": 16
                            },
                            formatter: '{b}:{c}'
                        },
                        "emphasis": {
                            "show": true
                        }
                    }
                }]

            });
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var names = [];    //类别数组（用于存放饼图的类别）
            var brower = [];
            $.ajax({
                type: 'get',
                url: contextPath + 'driverNum2',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        brower.push({
                            value: item.num,
                            name: item.department
                        });
                    });
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        legend: {
                            data: names
                        },
                        series: [{
                            data: brower
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        function loadDriver5() {


            var myChart = echarts.init(document.getElementById('eighthPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '驾驶员在职状态柱形图',
                    x: 'center'
                },
                tooltip: {},
                // legend: {
                //     data: ['人数']
                // },
                xAxis: {
                    data: []
                },
                yAxis: {
                    splitLine: {show: false},//去除网格线
                    name: ''
                },
                series: [{
                    barWidth: "30px",
                    name: '驾驶员在职状态柱形图',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#333'
                                }
                            }
                        }
                    },
                    data: []
                }]
            });


            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画


            var names = [];    //类别数组（实际用来盛放X轴坐标值）
            var nums = [];    //销量数组（实际用来盛放Y坐标值）


            $.ajax({
                type: 'get',
                url: contextPath + 'driverNum1',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        nums.push(item.num);    //挨个取出销量并填入销量数组
                    });


                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '驾驶员人数',  //显示在上部的标题
                            data: nums
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        function loadDriver6() {


            var myChart = echarts.init(document.getElementById('ninthPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '在职驾驶员工作状态柱形图',
                    x: 'center'
                },
                tooltip: {},
                // legend: {
                //     data: ['人数']
                // },
                xAxis: {
                    data: []
                },
                yAxis: {
                    splitLine: {show: false},//去除网格线
                    name: ''
                },
                series: [{
                    barWidth: "30px",
                    name: '在职驾驶员工作状态柱形图',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#333'
                                }
                            }
                        }
                    },
                    data: []
                }]
            });


            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画


            var names = [];    //类别数组（实际用来盛放X轴坐标值）
            var nums = [];    //销量数组（实际用来盛放Y坐标值）


            $.ajax({
                type: 'get',
                url: contextPath + 'driverNum2',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        nums.push(item.num);    //挨个取出销量并填入销量数组
                    });


                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '驾驶员人数',  //显示在上部的标题
                            data: nums
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        function loadCar3() {
            var myChart = echarts.init(document.getElementById('tenthPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
                title: {
                    text: '车辆分配状态饼形图',
                    // subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [{
                    name: '车辆分配状态饼形图',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '50%'],
                    data: [],
                    "label": {
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "fontSize": 16
                            },
                            formatter: '{b}:{c}'
                        },
                        "emphasis": {
                            "show": true
                        }
                    }
                }]
            });
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var names = [];    //类别数组（用于存放饼图的类别）
            var brower = [];
            $.ajax({
                type: 'get',
                url: contextPath + 'carNum1',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        brower.push({
                            name: item.department,
                            value: item.num
                        });
                    });
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        legend: {
                            data: names
                        },
                        series: [{
                            data: brower
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        function loadCar4() {


            var myChart = echarts.init(document.getElementById('eleventhPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '车辆分配状态柱形图',
                    x: 'center'
                },
                tooltip: {},
                // legend: {
                //     data: ['人数']
                // },
                xAxis: {
                    data: []
                },
                yAxis: {
                    splitLine: {show: false},//去除网格线
                    name: ''
                },
                series: [{
                    barWidth: "30px",
                    name: '车辆分配状态柱形图',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#333'
                                }
                            }
                        }
                    },
                    data: []
                }]
            });


            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画


            var names = [];    //类别数组（实际用来盛放X轴坐标值）
            var nums = [];    //销量数组（实际用来盛放Y坐标值）


            $.ajax({
                type: 'get',
                url: contextPath + 'carNum1',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        nums.push(item.num);    //挨个取出销量并填入销量数组
                    });


                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '车辆数',  //显示在上部的标题
                            data: nums
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        function loadCar5() {
            var myChart = echarts.init(document.getElementById('twelvethPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
                title: {
                    text: '未分配车辆状态环形图',
                    // subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'center',
                                    max: 1548
                                }
                            }
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                series: [{
                    name: '未分配车辆状态环形图',
                    type: 'pie',
                    radius: ['42%', '62%'],  //设置环形的空间大小
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                position: 'center',
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: [],
                    "label": {
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "fontSize": 16
                            },
                            formatter: '{b}:{c}'
                        },
                        "emphasis": {
                            "show": true
                        }
                    }
                }]

            });
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var names = [];    //类别数组（用于存放饼图的类别）
            var brower = [];
            $.ajax({
                type: 'get',
                url: contextPath + 'carNum2',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        brower.push({
                            value: item.num,
                            name: item.department
                        });
                    });
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        legend: {
                            data: names
                        },
                        series: [{
                            data: brower
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        function loadCar6() {


            var myChart = echarts.init(document.getElementById('thirthPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '未分配车辆状态柱形图',
                    x: 'center'
                },
                tooltip: {},
                // legend: {
                //     data: ['人数']
                // },
                xAxis: {
                    data: []
                },
                yAxis: {
                    splitLine: {show: false},//去除网格线
                    name: ''
                },
                series: [{
                    barWidth: "30px",
                    name: '未分配车辆状态柱形图',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#333'
                                }
                            }
                        }
                    },
                    data: []
                }]
            });


            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画


            var names = [];    //类别数组（实际用来盛放X轴坐标值）
            var nums = [];    //销量数组（实际用来盛放Y坐标值）


            $.ajax({
                type: 'get',
                url: contextPath + 'carNum2',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        nums.push(item.num);    //挨个取出销量并填入销量数组
                    });


                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '车辆数',  //显示在上部的标题
                            data: nums
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };

        function loadWaybill1() {
            var myChart = echarts.init(document.getElementById('fourteenthPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '运单状态柱形图',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: "{a} <br/>{b}: {c} %"
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '16%',
                    containLabel: true,
                    width: 371
                },
                dataZoom: {
                    show: true,
                    start: 0,
                    end: 50,
                    height: 10,//滚动条高度
                    backgroundColor: '#effbfe',//滚动条滚动区域背景色
                    dataBackgroundColor: '#007acc',//有数据时候数据在滚动条上显示的颜色
                    fillerColor: '#b7e9f8',//滚动条条条本身的颜色
                    handleColor: '#56abe4',//控制滚动条长短（滚动条两边）的爪爪颜色
                    handleSize: 10//爪爪的宽度
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    splitLine: {show: false},//去除网格线
                    name: ''
                },
                series: [{
                    name: '正确率',
                    type: 'bar',
                    barWidth: '30%',
                    data: [],
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#FF0000', '#FF8800', '#008800', '#00AAAA', '#0066FF', '#9900FF'];
                                return colorList[params.dataIndex];
                            },
                            label: {
                                show: true,
                                position: "top",
                                formatter: '{c}'
                            }
                        }
                    }
                }]
            });


            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画


            var names = [];    //类别数组（实际用来盛放X轴坐标值）
            var nums = [];    //销量数组（实际用来盛放Y坐标值）


            $.ajax({
                type: 'get',
                url: contextPath + 'waybillNum',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        nums.push(item.num);    //挨个取出销量并填入销量数组
                    });


                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '运单数量',  //显示在上部的标题
                            data: nums
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        function loadOrder1() {
            var myChart = echarts.init(document.getElementById('fifteenthPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
                title: {
                    text: '订单状态饼形图',
                    // subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [{
                    name: '订单状态饼形图',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '50%'],
                    data: [],
                    "label": {
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "fontSize": 16
                            },
                            formatter: '{b}:{c}'
                        },
                        "emphasis": {
                            "show": true
                        }
                    }
                }]
            });
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var names = [];    //类别数组（用于存放饼图的类别）
            var brower = [];
            $.ajax({
                type: 'get',
                url: contextPath + 'orderNum1',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        brower.push({
                            name: item.department,
                            value: item.num
                        });
                    });
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        legend: {
                            data: names
                        },
                        series: [{
                            data: brower
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        function loadOrder2() {
            var myChart = echarts.init(document.getElementById('sixteenthPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
                title: {
                    text: '订单状态环形图',
                    // subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'center',
                                    max: 1548
                                }
                            }
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                series: [{
                    name: '订单状态环形图',
                    type: 'pie',
                    radius: ['42%', '62%'],  //设置环形的空间大小
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                position: 'center',
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: [],
                    "label": {
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "fontSize": 16
                            },
                            formatter: '{b}:{c}'
                        },
                        "emphasis": {
                            "show": true
                        }
                    }
                }]

            });
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var names = [];    //类别数组（用于存放饼图的类别）
            var brower = [];
            $.ajax({
                type: 'get',
                url: contextPath + 'orderNum1',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list, function (index, item) {
                        names.push(item.department);    //挨个取出类别并填入类别数组
                        brower.push({
                            value: item.num,
                            name: item.department
                        });
                    });
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        legend: {
                            data: names
                        },
                        series: [{
                            data: brower
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        function loadTwoLine() {
            var myChart = echarts.init(document.getElementById('seventeenthPieChart'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '订单数量统计',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis',

                },
                grid: {
                    left: '6%',
                    right: '4%',
                    bottom: '16%',
                    containLabel: true,
                    width: 1000
                },
                dataZoom: {
                    show: true,
                    start: 0,
                    end: 50,
                    height: 10,//滚动条高度
                    backgroundColor: '#effbfe',//滚动条滚动区域背景色
                    dataBackgroundColor: '#007acc',//有数据时候数据在滚动条上显示的颜色
                    fillerColor: '#b7e9f8',//滚动条条条本身的颜色
                    handleColor: '#56abe4',//控制滚动条长短（滚动条两边）的爪爪颜色
                    handleSize: 10//爪爪的宽度
                },
                legend: {
                    orient: "vertical",
                    left: "left",
                    data: ['订单数量']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: {
                    type: 'category',
                    boundaryGap: false, //取消左侧的间距
                    data: []
                },
                yAxis: {
                    type: 'value',
                    splitLine: {show: false},//去除网格线
                    name: ''
                },
                series: [
                    {
                        name: '订单数量',
                        type: 'line',
                        symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                        data: []
                    }   //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                ]
            });
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
            var names = [];    //类别数组（实际用来盛放X轴坐标值）
            var series1 = [];

            $.ajax({
                type: 'get',
                url: contextPath + "/orderNum2",
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    console.log(result);
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    $.each(result.list.dingdan, function (index, item) {
                        names.push(item.AREA);    //挨个取出类别并填入类别数组
                        series1.push(item.LANDNUM);
                    });

                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            data: series1
                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        };


        $("#checkbox1").click(function () {
            if ($(this).attr("checked") == "checked") {
                $("#sixthPieChart").parent().css('display','none');
                $("#secondPieChart").parent().css('display','none');
                $("#eighthPieChart").parent().css('display','none');
                $(this).removeAttr("checked");
                $(this).prop("checked", false);
            } else {
                if (jsyb == true) {
                    $("#sixthPieChart").parent().css('display','inline-block');
                }
                if (jsyh == true) {
                    $("#secondPieChart").parent().css('display','inline-block');
                }
                if (jsyz == true) {
                    $("#eighthPieChart").parent().css('display','inline-block');
                }
                $(this).attr("checked", "checked");
                $(this).prop("checked", true);
            }
        });
        $("#checkbox2").click(function () {
            if ($(this).attr("checked") == "checked") {
                $("#firstPieChart").parent().css('display','none');
                $("#seventhPieChart").parent().css('display','none');
                $("#ninthPieChart").parent().css('display','none');
                $(this).removeAttr("checked");
                $(this).prop("checked", false);
            } else {
                if (zzjsyb == true) {
                    $("#firstPieChart").parent().css('display','inline-block');
                }
                if (zzjsyh == true) {
                    $("#seventhPieChart").parent().css('display','inline-block');
                }
                if (zzjsyz == true) {
                    $("#ninthPieChart").parent().css('display','inline-block');
                }
                $(this).attr("checked", "checked");
                $(this).prop("checked", true);
            }
        });
        $("#checkbox3").click(function () {
            if ($(this).attr("checked") == "checked") {
                $("#tenthPieChart").parent().css('display','none');
                $("#thirdPieChart").parent().css('display','none');
                $("#eleventhPieChart").parent().css('display','none');
                $(this).removeAttr("checked");
                $(this).prop("checked", false);
            } else {
                if (clb == true) {
                    $("#tenthPieChart").parent().css('display','inline-block');
                }
                if (clh == true) {
                    $("#thirdPieChart").parent().css('display','inline-block');
                }
                if (clz == true) {
                    $("#eleventhPieChart").parent().css('display','inline-block');
                }
                $(this).attr("checked", "checked");
                $(this).prop("checked", true);
            }
        });
        $("#checkbox4").click(function () {
            if ($(this).attr("checked") == "checked") {
                $("#forthPieChart").parent().css('display','none');
                $("#twelvethPieChart").parent().css('display','none');
                $("#thirthPieChart").parent().css('display','none');
                $(this).removeAttr("checked");
                $(this).prop("checked", false);
            } else {
                if (wfpclb == true) {
                    $("#forthPieChart").parent().css('display','inline-block');
                }
                if (wfpclh == true) {
                    $("#twelvethPieChart").parent().css('display','inline-block');
                }
                if (wfpclz == true) {
                    $("#thirthPieChart").parent().css('display','inline-block');
                }
                $(this).attr("checked", "checked");
                $(this).prop("checked", true);
            }
        });
        $("#checkbox5").click(function () {
            if ($(this).attr("checked") == "checked") {
                $("#fifteenthPieChart").parent().css('display','none');
                $("#sixteenthPieChart").parent().css('display','none');
                $("#seventeenthPieChart").parent().css('display','none');
                $(this).removeAttr("checked");
                $(this).prop("checked", false);
            } else {
                if (ddb == true) {
                    $("#fifteenthPieChart").parent().css('display','inline-block');
                }
                if (ddh == true) {
                    $("#sixteenthPieChart").parent().css('display','inline-block');
                }
                if (ddz == true) {
                    $("#seventeenthPieChart").parent().css('display','inline-block');
                }
                $(this).attr("checked", "checked");
                $(this).prop("checked", true);
            }
        });
        $("#checkbox6").click(function () {
            if ($(this).attr("checked") == "checked") {
                $("#fifthPieChart").parent().css('display','none');
                $("#fourteenthPieChart").parent().css('display','none');
                $(this).removeAttr("checked");
                $(this).prop("checked", false);
            } else {
                if (ydb == true) {
                    $("#fifthPieChart").parent().css('display','inline-block');
                }
                if (ydz == true) {
                    $("#fourteenthPieChart").parent().css('display','inline-block');
                }
                $(this).attr("checked", "checked");
                $(this).prop("checked", true);
            }
        });

        $("#quanxuan").click(function () {
            if (jsyb == true) {
                $("#sixthPieChart").parent().css('display','inline-block');
            }
            if (jsyh == true) {
                $("#secondPieChart").parent().css('display','inline-block');
            }
            if (jsyz == true) {
                $("#eighthPieChart").parent().css('display','inline-block');
            }
            if (zzjsyb == true) {
                $("#firstPieChart").parent().css('display','inline-block');
            }
            if (zzjsyh == true) {
                $("#seventhPieChart").parent().css('display','inline-block');
            }
            if (zzjsyz == true) {
                $("#ninthPieChart").parent().css('display','inline-block');
            }
            if (clb == true) {
                $("#tenthPieChart").parent().css('display','inline-block');
            }
            if (clh == true) {
                $("#thirdPieChart").parent().css('display','inline-block');
            }
            if (clz == true) {
                $("#eleventhPieChart").parent().css('display','inline-block');
            }
            if (wfpclb == true) {
                $("#forthPieChart").parent().css('display','inline-block');
            }
            if (wfpclh == true) {
                $("#twelvethPieChart").parent().css('display','inline-block');
            }
            if (wfpclz == true) {
                $("#thirthPieChart").parent().css('display','inline-block');
            }
            if (ddb == true) {
                $("#fifteenthPieChart").parent().css('display','inline-block');
            }
            if (ddh == true) {
                $("#sixteenthPieChart").parent().css('display','inline-block');
            }
            if (ddz == true) {
                $("#seventeenthPieChart").parent().css('display','inline-block');
            }
            if (ydb == true) {
                $("#fifthPieChart").parent().css('display','inline-block');
            }
            if (ydz == true) {
                $("#fourteenthPieChart").parent().css('display','inline-block');
            }
            $("#checkbox1,#checkbox2,#checkbox3,#checkbox4,#checkbox5,#checkbox6").prop("checked", true);
            $("#checkbox1,#checkbox2,#checkbox3,#checkbox4,#checkbox5,#checkbox6").attr("checked", "checked");

        });
        $("#quxiaoquanxuan").click(function () {
            $("#firstPieChart,#secondPieChart,#thirdPieChart,#forthPieChart,#fifthPieChart,#sixthPieChart,#seventhPieChart,#eighthPieChart,#ninthPieChart,#tenthPieChart,#eleventhPieChart,#twelvethPieChart,#thirthPieChart,#fourteenthPieChart,#fifteenthPieChart,#sixteenthPieChart,#seventeenthPieChart").parent().css('display','none');
            $("#checkbox1,#checkbox2,#checkbox3,#checkbox4,#checkbox5,#checkbox6").prop("checked", false);
            $("#checkbox1,#checkbox2,#checkbox3,#checkbox4,#checkbox5,#checkbox6").removeAttr("checked");

        });

        // $("#bing").click(function () {
        //     if ($("#bing").attr("checked") == "checked") {
        //         $("#firstPieChart,#forthPieChart,#sixthPieChart,#tenthPieChart,#fifthPieChart").parent().css('display','none');
        //         $("#bing").removeAttr("checked");
        //         $("#bing").prop("checked",false);
        //         $("#checkbox1,#checkbox4,#checkbox7,#checkbox10,#checkbox13").prop("checked",false);
        //         $("#checkbox1,#checkbox4,#checkbox7,#checkbox10,#checkbox13").removeAttr("checked");
        //     } else {
        //         $("#firstPieChart,#forthPieChart,#sixthPieChart,#tenthPieChart,#fifthPieChart").parent().css('display','inline-block');
        //         $("#bing").attr("checked","checked");
        //         $("#bing").prop("checked",true);
        //         $("#checkbox1,#checkbox4,#checkbox7,#checkbox10,#checkbox13").prop("checked",true);
        //         $("#checkbox1,#checkbox4,#checkbox7,#checkbox10,#checkbox13").attr("checked","checked");
        //     }
        //
        // });
        //
        // $("#huan").click(function () {
        //     if ($("#huan").attr("checked") == "checked") {
        //         $("#secondPieChart,#thirdPieChart,#seventhPieChart,#twelvethPieChart").parent().css('display','none');
        //         $("#huan").removeAttr("checked");
        //         $("#huan").prop("checked",false);
        //         $("#checkbox2,#checkbox5,#checkbox8,#checkbox11").prop("checked",false);
        //         $("#checkbox2,#checkbox5,#checkbox8,#checkbox11").removeAttr("checked");
        //     } else {
        //         $("#secondPieChart,#thirdPieChart,#seventhPieChart,#twelvethPieChart").parent().css('display','inline-block');
        //         $("#huan").attr("checked","checked");
        //         $("#huan").prop("checked",true);
        //         $("#checkbox2,#checkbox5,#checkbox8,#checkbox11").prop("checked",true);
        //         $("#checkbox2,#checkbox5,#checkbox8,#checkbox11").attr("checked","checked");
        //     }
        //
        // });
        //
        // $("#zhu").click(function () {
        //     if ($("#zhu").attr("checked") == "checked") {
        //         $("#eighthPieChart,#ninthPieChart,#eleventhPieChart,#thirthPieChart,#fourteenthPieChart").parent().css('display','none');
        //         $("#zhu").removeAttr("checked");
        //         $("#zhu").prop("checked",false);
        //         $("#checkbox3,#checkbox6,#checkbox9,#checkbox12,#checkbox14").prop("checked",false);
        //         $("#checkbox3,#checkbox6,#checkbox9,#checkbox12,#checkbox14").removeAttr("checked");
        //     } else {
        //         $("#eighthPieChart,#ninthPieChart,#eleventhPieChart,#thirthPieChart,#fourteenthPieChart").parent().css('display','inline-block');
        //         $("#zhu").attr("checked","checked");
        //         $("#zhu").prop("checked",true);
        //         $("#checkbox3,#checkbox6,#checkbox9,#checkbox12,#checkbox14").prop("checked",true);
        //         $("#checkbox3,#checkbox6,#checkbox9,#checkbox12,#checkbox14").attr("checked","checked");
        //     }
        //
        // });

    });
</script>
</body>

</html>